<template>
  <a-layout id="container">
    <!--  side自适应宽度  -->
    <a-layout-sider v-model="isMenuCollapse"  :trigger="null" collapsible>

      <LayoutMenu :is-menu-collapse="isMenuCollapse"></LayoutMenu>

    </a-layout-sider>
    <a-layout id="main">
      <a-layout-header id="header">
        <a-icon class="trigger" :type="getMenuCollapse" @click="handleCollapse"></a-icon>
        <a-dropdown id="centerDropdown">
            <span class="ant-dropdown-link">
              <a-avatar id="headerImg" size="large" style="float: left"> {{userInfo.username}} </a-avatar>
              <a-icon type="down" style="padding-top: 20px"></a-icon>
            </span>
          <a-menu slot="overlay">
            <a-menu-item @click="personal">个人中心</a-menu-item>
            <a-menu-item @click="logout" divided>退出登录</a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content>
        <a-tabs v-model="$store.state.maintabs.activeRoute" :hide-add="true"
                 type="editable-card"
                 @tabClick="clickTab"
                 @edit="onEdit">
          <a-tab-pane v-for="item in $store.state.maintabs.tabs"
                       :key="item.route" :tab="item.name"
                       :name="item.route" :closable="item.closable">
          </a-tab-pane>
        </a-tabs>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


<script>

import {logout} from "@/api/system";
import store from '@/store/index'
import {message} from "ant-design-vue";
import LayoutMenu from "@/views/layout/LayoutMenu";
export default {
  name: 'Home',
  components: {
    LayoutMenu
    // LayoutMenu
  },
  beforeRouteEnter (to,from,next) {
    if (store.state.user.isGetInfo){
      next(vm =>vm.setUserInfo({result:true,data:store.state.user.info}))
    }else {
      console.log('Home:beforeRouteEnter:GetUserInfo')
      store.dispatch('GetUserInfo').then(res=>{
        next(vm =>vm.setUserInfo(res))
      }).catch(err=>{
        message.error("Home:beforeRouteEnter:error"+err.message)
      })
    }

  },
  data(){
    return {
      isMenuCollapse: false,
      userInfo:{}
    }
  },
  methods:{
    setUserInfo(res){
      if (res.result){
        this.userInfo = res.data
      }
    },
    handleCollapse(){
      this.isMenuCollapse = !this.isMenuCollapse
    },
    clickTab(tab){
      console.log(tab)
      if (this.$route.path!==tab){
        this.$router.push(tab)
      }
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    remove(targetName){
      if(targetName !== "/index/first"){
        this.$store.commit('removeTab', targetName);
        let redirect = this.$store.state.maintabs.tabs[this.$store.state.maintabs.tabs.length-1].route
        if (this.$route.path !== redirect){
          this.$router.push(redirect)
        }
      }
    },
    personal(){
      if(this.$route.path!=='/index/personal'){
        this.$router.push('/index/personal')
      }
    },
    logout(){
      logout().then(()=>{
          store.commit("setMenuListAndTabs",{
            tabs:[
              {route:'/index/first',name:'首页',closable:false}
            ],
            menuList:[]
          })
          this.$store.commit("setIsGetInfo");
          this.$router.push("/login");  //跳转到登录界面
          sessionStorage.clear() //sessionStorage数据清理
      }).catch(err =>{
        console.log(err)
        // this.$message.error(`登出失败,${err.message}`)
      })
    }
  },
  computed:{
    getMenuCollapse(){
      return this.isMenuCollapse ? 'menu-unfold' : 'menu-fold'
    }
  }
}
</script>

<style lang="less">
#container{
  margin: 0;
  padding: 0;
  height: 100%;
}
#main{
    margin: 0;
    padding: 0;
    height: 100%;
}
#container .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
#container .trigger:hover {
  color: #1890ff;
}
#header {
  //background-color: #1F9FFF;
  background: #fff;
  padding: 0;

}
#centerDropdown{
  float: right;
  //下面是---垂直居中---
  //position:relative;
  //top: 50%;
  ///* 垂直向上偏移自身50%的高度 */
  //transform: translateY(-30%);
}
#headerImg{
  transform: translateY(20%);
}
.a-layout-sider {
  background-color: #FFFFFF;
  text-align: left;
}
.a-layout-content {
  padding-top: 0;
  background-color: #E9EEF3;
  text-align: center;
}
//不显示tab-content，内容区域我们使用router-view自己定义过
//.el-tabs--border-card>.el-tabs__content {
//  padding: 0;
//}
</style>
